<template>
  <el-menu
    class="categories"
    default-active="0"
    @select="handleSelect"
    active-text-color="red">
    <el-menu-item index="All">
      <i class="el-icon-menu"></i>
      <span slot="title">全部</span>
    </el-menu-item>
    <el-menu-item index="文学">
      <i class="el-icon-menu"></i>
      <span slot="title">文学</span>
    </el-menu-item>
    <el-menu-item index="文化">
      <i class="el-icon-menu"></i>
      <span slot="title">文化</span>
    </el-menu-item>
    <el-menu-item index="生活">
      <i class="el-icon-menu"></i>
      <span slot="title">生活</span>
    </el-menu-item>
    <el-menu-item index="科技">
      <i class="el-icon-menu"></i>
      <span slot="title">科技</span>
    </el-menu-item>
  </el-menu>
</template>

<script>
export default {
  name: 'SideMenu',
  data () {
    return {
      table: []
    }
  },
  methods: {
    handleSelect (index) {
      console.log(index)
      this.$axios
        .post('/getBy_type',{
          type: index
        })
        .then(successResponse => {
          this.table = []
          for (var i = 0 ; i<successResponse.data.length ; i++){
            this.table.push(successResponse.data[i])
          }
          this.$emit("listenToSideMenu",this.table)
        })
    }
}
}
</script>

<style scoped>

</style>
